<template>
  <div class="home" v-back="color">
    <input type="text" v-mvp="msg" />
    <p>{{ msg }}</p>
    <img
      v-for="(item, index) in url"
      :src="require(`../assets/${item}`)"
      alt=""
      srcset=""
    />
    <button @click="cut">切换颜色</button>
  </div>
</template>

<script>
// @ is an alias to /src
import { ref } from "vue";
export default {
  name: "HomeView",
  components: {},
  setup(props) {
    const msg = ref("你是积云最靓仔");
    const color = ref("#000");
    const url = ["clock.png"];
    const cut = () => {
      let num = Math.random().toString(16).substr(2, 6);
      color.value = "#" + num;
    };
    return {
      msg,
      color,
      cut,
      url,
    };
  },
  directives: {
    // 自定义指令
    mvp: {
      // 想实现 v-model 一样的效果
      mounted(el, binding, vnode, prevVNode) {
        // console.log(el);
        // console.log(binding);
        el.value = binding.value;
        el.oninput = function (e) {
          // binding.value = e.target.value;
          binding.instance.msg = e.target.value;
        };
      },
    },
    back: {
      mounted(el, binding) {
        el.style.background = binding.value;
      },
      updated(el, binding) {
        el.style.background = binding.value;
      },
    },
  },
};
</script>
